<template>
  <PageWrapper title="">
    <XGrid
ref="xGrid"
    :stripe="true"
    :columns="columns"
    :query-params="formConditionData.data"
    :footer-method="footerMethod"
    :query-api="getTableData"
    :deletes-api="deletes"
    @create="handleCreate"
    @edit="handleEdit"
    @detail="handleDetail"
    @print="handlePrint"
    >
    <template #form>
      <vxe-form :data="formConditionData.data" title-colon collapse-status>
        <vxe-form-item title="入库类型" span="24">
          <template #default="{data}">
            <vxe-radio-group v-model="data.ioType" @change="load">
              <vxe-radio-button v-for="(v, i) in ioTypeList" :key="i" :label="v.ID" :content="v.label"/>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
        <vxe-form-item title="单号">
          <template #default="{ data }">
            <vxe-input
            v-model="data.word" clearable
              prefix-icon="vxe-icon-search"
              placeholder="单号|订单号"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="客户" field="cutomerId" :folding="false">
          <template #default="{ data }">
            <vxe-select
            v-model="data.customerId" filterable
            :options="customerList"
            placeholder="请选择"
            clearable/>
          </template>
        </vxe-form-item>
        <vxe-form-item align="center">
        <template #default>
            <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="load" title="点击查询">查询</vxe-button>
            <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
                <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
            </a-popconfirm>
        </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    </XGrid>

    <Print ref="printer"/>
  </PageWrapper>
</template>
<script lang="ts" name="Outbound" setup>
import { reactive, ref } from 'vue';
import XEUtils from 'xe-utils';
import Print from "./Print.vue";
import { columns } from './data';
import { DictItem, getListByMark } from "/@/api/admin/dict";
import { deletes, getTableData } from "/@/api/wms/bill-outbound";
import { getListData as getCustomerListData } from '/@/api/wms/customer';
import { BillItem } from "/@/api/wms/wms-model";
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';
import { useGo } from '/@/hooks/web/usePage';

const go = useGo();
const xGrid = ref()

const formConditionData = reactive({data: {
  word: '',
  ioType: 0,
  customerId: null,
}})

const handleCreate = () => {
  go('/warehouse-business/tab/outbound');
}

const handleEdit = (row:BillItem) => {
  go('/warehouse-business/tab/outbound'+'/'+row.code);
}

const handleDetail = (row:BillItem) => {
  go('/warehouse-business/tab/outbound/'+row.code+'/0');
}

const printer = ref()
const handlePrint = (row:BillItem) => {
  let $printer = printer.value
  if ($printer) {
    $printer.handlePrintOne(row)
  }
}

const footerMethod = ({columns, data,}) => {
  return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计'
        }
        if (['qty'].includes(column.field)) {
          let sum = data.reduce((pre, cur,)=>{
            if (cur.goodsList) {
              return pre + cur.goodsList.reduce((a, b)=> a + b.qty, 0)
            }
            return 0
          }, 0)
          return XEUtils.commafy(XEUtils.toNumber(sum), { digits: 1, });
        }
        if (['amount'].includes(column.field)) {
          let sum = data.reduce((pre, cur,)=>{
            if (cur.goodsList) {
              return pre + cur.goodsList.reduce((a, b)=> a + b.qty * b.price, 0)
            }
            return 0
          }, 0)
          return XEUtils.commafy(XEUtils.toNumber(sum), { digits: 2, });
        }
        return null
      }),
    ]
}

const load = () => {
  xGrid.value.reload()
}

const reset = () => {
  Object.assign(formConditionData, {data: {ioType: 0,}});
  xGrid.value.reload(true)
}

//
const ioTypeList = ref<DictItem[]>()
getListByMark({mark: 'bill-outbound-type'}).then(dd => {
  ioTypeList.value = [{ID: 0, label: '全部'} as any, ...(dd.filter(e => e.tag === 0))]
})

const customerList = ref([])
getCustomerListData().then(dd => {
  customerList.value = dd?.map(e => {
    return {label: e.name, value: e.ID, disabled: false,}
  }) as never[];
})

</script>